<template>
	<div class="comment-wrap">
		<div v-title style="display: none">评论页面</div>
		<textarea class="comment-content" placeholder="亲~对本次练车满意吗？" v-model="comment"></textarea>
		<div class="comment-noname">
			<span :class="this.classA"></span>
			<span class="no-name" @click="isanonymity">匿名评论</span>
		</div>
		<div class="comment-star">
			<div class="title">
				<span class="iconA"></span>
				<span class="span1">教练评分</span>
			</div>
			<div class="comments">
				<div>教学质量
					<span class="stars">
					<span v-for="(item,index) in this.starclassA">
						<span :class="item" @click="changeStarA(index)"></span>
		          	</span>
		          	</span>
				</div>
				<div>服务态度
					<span class="stars">
					<span v-for="(item,index) in this.starclassB">
						<span :class="item" @click="changeStarB(index)"></span>
		          	</span>
		          	</span>
				</div>
				<div>车容车况
					<span class="stars">
					<span v-for="(item,index) in this.starclassC">
						<span :class="item" @click="changeStarC(index)"></span>
		          	</span>
		          	</span>
				</div>
			</div>	
		</div>
		<div class="comment-star">
			<div class="title">
				<span class="iconB"></span>
				<span class="span1">训练场评分</span>
			</div>
			<div class="comments">
				<div>环境卫生
					<span class="stars">
					<span v-for="(item,index) in this.starclassD">
						<span :class="item" @click="changeStarD(index)"></span>
		          	</span>
		          	</span>
				</div>
				<div>方便舒适
					<span class="stars">
					<span v-for="(item,index) in this.starclassE">
						<span :class="item" @click="changeStarE(index)"></span>
		          	</span>
		          	</span>
				</div>
			</div>
		</div>
		<div class="confirm-fix"></div>
		<div class="comment-footer">
	  		<div class="footer-comment">
	    		<span class="span-sum" @click="goDetail">查看详情</span>
	    		<span class="span-order" @click="tooltip">提交</span>
	  		</div>
  		</div>
  		<notification notification="评论成功，谢谢您的参与。" title="提示" isWithdraw="singleCallback" v-show="this.notice.tip" v-on:gettooltip="showtooltip"></notification>
	</div>
</template>
<script type="text/ecmascript-6">
import notification from 'components/notification/notification';
export default {
    props: {
    },
    data() {
      return {
		comment: '',
		classA: 'unselect-icon',
		starclassA: [ 'star-icon', 'star-icon', 'star-icon', 'star-icon', 'star-icon' ],
		starclassB: [ 'star-icon', 'star-icon', 'star-icon', 'star-icon', 'star-icon' ],
		starclassC: [ 'star-icon', 'star-icon', 'star-icon', 'star-icon', 'star-icon' ],
		starclassD: [ 'star-icon', 'star-icon', 'star-icon', 'star-icon', 'star-icon' ],
		starclassE: [ 'star-icon', 'star-icon', 'star-icon', 'star-icon', 'star-icon' ],
		notice: {
			tip: '',
			response: ''
        }
      };
    },
    watch: {
      getresponse: function(newdata, olddata) {
        if (newdata === 'ok') {
          this.submit();
        }
      }
    },
    computed: {
      getresponse() {
        return this.notice.response;
      }
    },
    methods: {
		isanonymity() {
			if (this.classA === 'unselect-icon') {
				this.classA = 'select-icon';
			} else {
				this.classA = 'unselect-icon';
			}
		},
		showtooltip(msg) {
			this.notice.tip = msg.tooltip;
			this.notice.response = msg.response;
		},
		tooltip() {
			this.notice.tip = 'true';
		},
		marktrans(value) {
			let mark = 0;
			for (let i in value) {
				if (value[i] === 'star-icon') {
					mark = mark + 2;
				}
			}
			mark = mark + '.00';
			return mark;
		},
		changeStarA: function(index) {
			this.starclassA = [];
			for (let i = 0; i < 5; i++) {
				if (i <= index) {
					this.starclassA.push('star-icon');
				} else {
					this.starclassA.push('star-grey');
				}
			}
		},
		changeStarB: function(index) {
			this.starclassB = [];
			for (let i = 0; i < 5; i++) {
				if (i <= index) {
					this.starclassB.push('star-icon');
				} else {
					this.starclassB.push('star-grey');
				}
			}
		},
		changeStarC: function(index) {
			this.starclassC = [];
			for (let i = 0; i < 5; i++) {
				if (i <= index) {
					this.starclassC.push('star-icon');
				} else {
					this.starclassC.push('star-grey');
				}
			}
		},
		changeStarD: function(index) {
			this.starclassD = [];
			for (let i = 0; i < 5; i++) {
				if (i <= index) {
					this.starclassD.push('star-icon');
				} else {
					this.starclassD.push('star-grey');
				}
			}
		},
		changeStarE: function(index) {
			this.starclassE = [];
			for (let i = 0; i < 5; i++) {
				if (i <= index) {
					this.starclassE.push('star-icon');
				} else {
					this.starclassE.push('star-grey');
				}
			}
		},
		goDetail() {
			let orderid = this.$route.query.order_id;
			this.$router.push({path: '/orderdetail/', query: {order_id: orderid}});
		},
		submit() {
			let orderid = this.$route.query.order_id;
			let markA = this.marktrans(this.starclassA);
			let markB = this.marktrans(this.starclassB);
			let markC = this.marktrans(this.starclassC);
			let markD = this.marktrans(this.starclassD);
			let markE = this.marktrans(this.starclassE);
			let anonymity = 'false';
			anonymity = (this.classA === 'select-icon').toString();
			this.$http.post('api/course/makecomments/', {out_trade_no: orderid, comment: this.comment, mobile: window.localStorage.cphone, teaching_grade: markA, serve_grade: markB, car_grade: markC, grade_A: markD, grade_B: markE, is_anonymity: anonymity}).then(response => {
				this.$router.replace({path: '/#myself'});
				this.$router.push({path: '/orderdetail/', query: {order_id: orderid}});
			});
		}
    },
    components: {
      notification
    }
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/mixin.styl"
@import "../../common/stylus/car.styl"
/* 主要文字 黑 $main-fn
   次要文字 灰 $se-fn
   预填文字 灰 $pre-fn
   描边 灰 $border 
   背景 灰白 $bg 
   主题 红 $theme
   辅助 蓝 $assist */
	.comment-wrap
		.comment-content
			height 100px
			width 100%
			box-sizing border-box
			background-color bg-white
			border none
			padding 12px 17px 0px
			line-height 22px
			font-size 16px
			overflow-x hidden
		.comment-noname
			background-color $bg-white
			height 30px
			width 100%
			.unselect-icon
				display block
				position absolute
				left 14px
				margin-top 7px
				circle-icon-1px($bg-white,13px)
				border 1px solid $theme
				border-radius 50%
			.select-icon
				display block
				position absolute
				left 14px
				margin-top 7px
				circle-icon-1px($theme,13px)
				bg-image('cm')
		.no-name
			font-size 15px
			color $se-fn
			position absolute
			margin-top 7px
			left 35px	
		.comment-star
			background-color $bg-white
			min-height 40px
			width 100%
			margin-top 11px
			.title
				height 40px
				width 100%
				line-height 40px
				font-size 16px
				border-1px($border)
				.iconA
					display inline-block
					float left
					margin-left 15.5px
					margin-top 13.5px
					bg-image('coach')
					square-icon(rgb(255,255,255),13px)
				.iconB
					display inline-block
					float left
					margin-left 15.5px
					margin-top 13.5px
					bg-image('court')
					square-icon(rgb(255,255,255),13px)
				.span1
					margin-left 5px
					font-size 16px
			.comments
				min-height 10px
				padding-left 38px
				border-1px($border)
				padding-top 2px
				padding-bottom 9px
				div
					height 24px
					line-height 24px
					color $se-fn
					font-size 15px
					margin-top 7.5px
					.stars
						display inline-block
						margin-left 25px
						position absolute
						padding-top 3.5px
						-webkit-tap-highlight-color rgba(0,0,0,0)
						span
							.star-grey
								display inline-block
								rectangle-icon($bg-white,17.5px,17px)
								icon-image('stars_grey')
								margin-left 12px
							.star-icon
								display inline-block
								rectangle-icon($bg-white,17.5px,17px)
								bg-image('stars')
								margin-left 12px
		.confirm-fix
			height 55px
			width 100%
		.comment-footer
			height 47px
			position fixed
			bottom 0px
			width 100%
			.footer-comment
				margin-left 0px
				margin-right 0px
				display flex
				justify-content space-between
				background-color rgba(33,33,33,0.8)
				span
					display inline-block
					color $bg-white
					line-height 47px
				.span-sum
					margin-left 40%
					background-color rgb(114,114,114)
					width 30%
					color $bg-white
					font-size 15px
					text-align center
				.span-order
					text-align center
					background-color $theme
					width 30%
					font-size 16px
</style>